<template>
    <transition name="fade">
        <div class="alertBox" v-show="show">
            <div class="alert-mask" v-show="isMaskLayer"></div>
            <transition  enter-active-class="zoomIn" leave-active-class="fade">
                <div class="box" :class="position" v-show="show">
                    <p>{{text}}</p>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "my-alert",
        data() {
            return {}
        },
        props: {
            // 是否显示提示
            show: {
                default: false,
                type: Boolean
            },
            // 是否显示遮罩层
            isMaskLayer: {
                default: false,
                type: Boolean
            },
            // 弹层位置
            position: {
                default: 'center',
                type: String
            },
            // 提示内容
            text: {
                default: 'Im toast',
                type: String
            },
            // 消失时长
            time: {
                default: 3000,
                type: Number
            }
        }
    }
</script>

<style lang="less" scoped>
    .alertBox {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        animation-duration: 100ms;
    }

    .box {
        min-width: 2rem;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        color: #fff;
        z-index: 5000;
        padding: .3rem .4rem;
        border-radius: .22rem;
        font-size: .28rem;
        animation-duration: 300ms;
        word-wrap: normal;
        p {
            display: inline-block;
            text-align: left;
        }
    }

    .box.top {
        margin-top: -5rem;
    }

    .box.center {
        margin-top: -2rem;
    }

    .box.bottom {
        margin-top: 2rem;
    }

    .alert-mask {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 4999;
    }
</style>
